// 出单人，展业人员， 订单附件
<template>

<div class="base-member">

    <h1 class="title">
        关联信息
    </h1>
    
    <div class="content">
         <Row :gutter='10'>
            <Col :span='16'>
                <div class="personal">
                    <c-form-readonly-block v-for='(item, index) of conf' :data='data' :keys='item.keys' :label='item.label' :key='index'></c-form-readonly-block>
                </div>
            </Col>
            <Col :span='8'>
                <div class="order-components">
                    <slot></slot>
                </div>
            </Col>
        </Row>
    </div>
   

</div>

</template>

<script lang='ts'>
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'

@Component({})
export default class baseMember extends Vue{
    name:string = 'base-member'


    @Prop()
    data
    
    conf:formInf.formReadonly[]= [

        {
            keys: ['DMnickname', 'DMcompany', 'DMdepartment', 'DMphone'],
            label: '出单人员'
        },
        {
            keys: ['DMnickname', 'DMcompany', 'DMdepartment', 'DMphone'],
            label: '展业人员'
        }
        
    ]
    
}


</script>

<style scoped lang='scss'>

.base-member{
    position: relative;
    
  
    
    .title{
        font-size: $font-small;
        margin-bottom: _intervals();
    }
    
    .content{
        padding: _rem(14px) _intervals();
        height: _rem(158px);
        border-radius: $border_radius;
        // border: _rem(1px) solid #e2e6f3;
        box-shadow: $default_shadow;
        box-shadow: 0 _rem(22px) _rem(18px) _rem(-18px) #e2e6f3;
    }
    .order-components{

        
        // position: absolute;
        // top: 0;
        // bottom: 0;
        // right: _intervals(2);

        // margin: auto;
        // height: 100%;
    }
}

</style>